<template>
	<gracePage headerBG="#EB5D4B" statusBarBG="#EB5D4B">
		<view slot="gHeader">
			<graceHeader background="#EB5D4B" style="height: 88rpx;">
				<view class="grace-header-body">
					<!-- 返回按钮 -->
					<view class="grace-header-icons grace-icons icon-arrow-left grace-white" @tap="goback"></view>
					<!-- 中间内容 -->
					<view class="grace-header-content-noflex" style="margin-right: 50rpx;text-align: center;color: #FFFFFF;font-size: 30rpx;">登录</view>
				</view>
			</graceHeader>
		</view>
		<!-- 页面主体 -->
		<view slot="gBody" class="grace-body">
			<form @submit="loginNow" class="grace-form" style="margin-top:80rpx;">
				<view class="grace-form-item grace-border-b">
					<text class="iconfont icon-shouji" style="color: #EB5D4B;font-size: 36rpx;"></text>
					<view class="grace-form-body"><input type="number" v-model="phoneno" class="grace-form-input" name="pn"
						 placeholder="请输入账号" /></view>
					<text class="grace-icons icon-close grace-form-icon grace-text-center" v-if="phoneno != ''" @tap="clearInput"></text>
				</view>
				<view class="grace-form-item grace-border-b">
					<text class="iconfont icon-mima" style="color: #EB5D4B;font-size: 36rpx;"></text>
					<view class="grace-form-body">
						<input type="password" v-if="pwdType == 'password'" class="grace-form-input" name="pwd" v-model="pwd" placeholder="请输入密码" />
						<input type="text" v-if="pwdType == 'text'" class="grace-form-input" name="pwd" v-model="pwd" placeholder="请输入密码" />
					</view>
					<text class="grace-icons icon-eye grace-form-icon grace-text-center" :class="[pwdType == 'text' ? 'grace-blue' : '']"
					 v-if="pwd != ''" @tap="showPwd"></text>
				</view>
				<view class="grace-flex grace-rows grace-flex-end" style="margin: 20rpx 0;"><text style="color: #999999;font-size: 28rpx;"
					 @tap="goChangePsw">忘记密码</text></view>
				<view class="grace-form-item">
					<graceCheckBtn :checked="val" name="agree" :parameter="[1, 2, 3]" @change="checkedChange" :size="40" color="#EE624E">
						<text class="grace-text" style="color: #999999;font-size: 32rpx;">我已阅读并同意</text>
						<text class="grace-text" style="color: #EE624E;font-size: 32rpx;" @click.stop="goUserAgreement">《乌小倌用户协议》</text>
						<text class="grace-text" style="color: #EE624E;font-size: 32rpx;" @click.stop="goPrivacyPolicy">《用户隐私协议》</text>
						<text class="grace-text" style="color: #EE624E;font-size: 32rpx;" @click.stop="goServiceInfo">《服务条款》</text>
					</graceCheckBtn>
				</view>

				<view class="grace-margin-top grace-flex grace-rows grace-space-between">
					<view class="register-btn" @tap="goRegister">去注册</view>
					<button form-type="submit" type="primary" class="grace-button grace-border-radius login-btn">登录</button>
				</view>
			</form>
		</view>
	</gracePage>
</template>
<script>
	import gracePage from '../../graceUI/components/gracePage.vue';
	import graceHeader from '../../graceUI/components/graceHeader.vue';
	import graceCheckBtn from '../../graceUI/components/graceCheckBtn.vue';
	var graceChecker = require('../../graceUI/jsTools/graceChecker.js');
	export default {
		data() {
			return {
				pnpre: 0,
				pwd: '',
				phoneno: '',
				pwdType: 'password',
				val: false,
				userInfo: null
			};
		},
		onBackPress(options) {
			uni.switchTab({
				url: '/pages/index/index'
			});
			return true;
		},
		onUnload: function() {
			if (this.userInfo) {
				uni.setStorageSync("userInfo", JSON.stringify(this.userInfo))
			}
		},
		onShow() {
			uni.clearStorage();
		},
		methods: {
			goback: function() {
				uni.switchTab({
					url: '/pages/index/index'
				});
			},
			checkedChange: function(e) {
				this.val = e[0];
			},
			showPwd: function() {
				this.pwdType = this.pwdType == 'password' ? 'text' : 'password';
			},
			clearInput: function() {
				this.phoneno = '';
			},
			loginWithWx: function() {
				uni.showToast({
					title: '请完善登录功能',
					icon: 'none'
				});
			},
			changePre: function(e) {
				this.pnpre = e.detail.value;
			},
			loginNow: function(e) {
				// 表单验证
				var rule = [{
					name: 'pn',
					checkType: 'phoneno',
					errorMsg: '请填写正确的手机号'
				}, {
					name: 'pwd',
					checkType: 'notnull',
					errorMsg: '请输入密码'
				}];
				var formData = e.detail.value;
				var checkRes = graceChecker.check(formData, rule);
				if (!this.val) {
					uni.showToast({
						title: '请阅读用户协议',
						icon: 'none'
					});
					return;
				}
				// 验证通过
				if (checkRes) {
					this.gRequest.post(
						'/login/index', {
							mobile: this.phoneno,
							password: this.pwd
						},
						'form', {},
						res => {
							if (res.status == 1) {
								this.userInfo = res.data
								uni.setStorage({
									key: 'userInfo',
									data: JSON.stringify(res.data),
									success: () => {
										setTimeout(() => {
											uni.navigateBack({});
										}, 100)
									}
								});
							} else {
								uni.showToast({
									title: res.msg,
									icon: 'none'
								});
								return;
							}
						}
					);
				} else {
					uni.showToast({
						title: graceChecker.error,
						icon: 'none'
					});
				}
			},
			goServiceInfo() {
				uni.navigateTo({
					url: '/pages/my/serviceInfo'
				});
			},
			goPrivacyPolicy() {
				uni.navigateTo({
					url: '/pages/my/privacyPolicy'
				});
			},
			goUserAgreement() {
				uni.navigateTo({
					url: '/pages/my/userAgreement'
				});
			},
			goRegister: function() {
				uni.navigateTo({
					url: '../login/register'
				});
			},
			goChangePsw: function() {
				uni.navigateTo({
					url: '../login/changePsw'
				});
			}
		},
		components: {
			gracePage,
			graceHeader,
			graceCheckBtn
		}
	};
</script>
<style>
	page {
		background: #ffffff;
	}

	.marginTop {
		margin-top: 100rpx;
	}

	.logo {
		width: 250rpx;
		height: 68rpx;
	}

	.login-sendmsg-btn {
		height: 60rpx;
		width: 200rpx;
		flex-shrink: 0;
		margin-left: 30rpx;
		text-align: center;
		background-color: #3688ff;
		line-height: 60rpx;
		font-size: 26rpx;
	}

	.grace-pnper {
		width: 168rpx;
		flex-shrink: 0;
	}

	.grace-form-label {
		width: 168rpx;
	}

	.grace-form-input {
		text-align: left;
	}

	.grace-form-item {
		padding: 10rpx 0;
	}

	.grace-login-three-items {
		display: block;
		width: 88rpx;
		height: 88rpx;
		line-height: 88rpx;
		font-size: 60rpx;
		color: #3688ff;
		text-align: center;
		margin: 10rpx;
	}

	.register-btn {
		width: 220rpx;
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		border: 2rpx solid rgba(181, 181, 181, 1);
		color: #666666;
		font-size: 28rpx;
		border-radius: 40rpx;
	}

	.login-btn {
		width: 420rpx;
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		border: 2rpx solid rgba(181, 181, 181, 0);
		color: #ffffff;
		background: #eb5d4b;
		font-size: 28rpx;
		border-radius: 40rpx;
	}
</style>
